<script setup>
import {ref,defineProps} from "vue";
import request  from '@/api/request'
let emits=defineEmits(["ref-table"])
let props = defineProps(["data1"])


let  select=()=>{
        request({
        url:'/processStep/Name',
        method:'get'
    }).then(res=>{
        Process.value=res.data
        
    })

}
select()
let Process=ref([]);
 let detail=ref({...props.data1})
const value1 = ref(true)
const radio1 = ref('1')
let planType=ref('1')
let zhuangtai=ref(false);
let MaterialManagement=ref({})
let sort = ref(1)
let num1 = ref(1)

const handleChange1 = (value) => {

}
const color1 = ref('#409EFF')

let zonggongxu = ref([]);

const fetchzonggongxu = async () => {
    
  try {
    const response = await request.get("/processStep/index", {
      params: { isMainUnit: 1, size: 100 }
    });
    zonggongxu.value = response.data.records;
  } catch (error) {
    ElMessage.error("获取工序失败");
  }
};
  fetchzonggongxu();
  let onSubmit=()=>{
    detail.value.processName=detail.value.psName
     request({
        url: '/detail/update',
        method: 'put',
        data: {
            ...detail.value,
            sort : props.data1.sort
            
        }
    }).then(res => {
        emits("ref-table")
    })
}
</script>
<template>
    <div>
        <el-card>
            <template #header>
                <el-form :model="detail" ref="form"  style="padding-left: 70px;" :inline="false"  class="card_wrap">
                    <el-form-item label="序号" class="c_item">
                          <el-input-number v-model="detail.sort"   :min="1" :max="2000"@change="handleChange1" disabled/>
                    </el-form-item>
                    <el-form-item  label="工序" class="c_item">
                                <el-select placeholder="选择工序" 
                                v-model="detail.processId" 
                                style="width: 150px;"
                                >
                                    <el-option 
                                    v-for="intm in Process" 
                                    :value="intm.processId" 
                                    :label="intm.processName"
                                    ></el-option>

                                </el-select>
                    </el-form-item>

                    <el-form-item label="与下一道工序关系" class="c_item_big" width="200px">
                                <el-select placeholder="选择与下一道工序关系" 
                                v-model="detail.processRelationship" 
                                style="width: 200px;" > 
                                
                                    <el-option value="S-to-S" label="S-to-S"></el-option>
                                    <el-option value="F-to-F" label="F-to-F"></el-option>
                                    <el-option value="S-to-F" label="S-to-F"></el-option>
                                    <el-option value="F-to-S" label="F-to-S"></el-option>
                                </el-select>
                    </el-form-item>

                    <!-- <el-form-item label="甘特图显示颜色" class="c_item">
                            <el-color-picker v-model="color1" class="color" />
                    </el-form-item> -->
                    
                    <el-form-item  label="是否为关键工序" class="c_item">
                                <el-select placeholder="选择是或否" v-model="detail.keyProcess" style="width: 150px;">
                                    <el-option :value=0 label="是"></el-option>
                                    <el-option :value=1 label="否"></el-option>
                                </el-select>
                                
                    </el-form-item>

                    <el-form-item  label="是否需要质检确认" class="c_item">
                                <el-select placeholder="选择是或否" v-model="detail.qualityInspection" style="width: 150px;">
                                    <el-option :value=0 label="是"></el-option>
                                    <el-option :value=1 label="否"></el-option>
                                </el-select>
                    </el-form-item>

                    <el-form-item label="准备时间" class="c_item">
                           <el-input-number v-model="detail.preparationTime" :min="1" :max="2000"@change="handleChange1" />
                    </el-form-item>

                    <el-form-item label="等待时间" class="c_item">
                            <el-input-number v-model="detail.waitTime" :min="1" :max="2000"@change="handleChange1" />
                    </el-form-item>

                    
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" class="right-bottom">修改</el-button>
                    </el-form-item>
               
                </el-form>
            </template>
        </el-card>
        <router-view/>
    </div>
</template>
<style scoped>
.c_item {
    flex: 1;
    margin: 0px 5px 15px 0;
    width: calc((100%-10px)/2);
    min-width: calc((100% - 10px)/2);
    max-width: calc((100% - 10px)/2);

    &:nth-child(3n) {
        margin-right: 0;
    }
}
.c_item_big {
    flex: 2;
    margin: 0px 5px 15px 0;
    width: calc((100%-10px)/1);
    min-width: calc((100% - 10px)/1);
    max-width: calc((100% - 10px)/1);

    &:nth-child(3n) {
        margin-right: 0;
    }
}
.card_wrap {
    width: 98%;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.color {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.right-bottom{
 margin-top: 10px;
 margin-left: 700px ;
}
.right-bottom2{
 margin-top: 20px;
 margin-left: 850px ;
}
</style>